<template>
  <div>
    <page-header title="商品管理"></page-header>
    <pageMain>
      <el-table :data="goodsList" style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="50"
          fixed="left"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="店铺"
          prop="store_name"
          fixed="left"
          width="140"
        >
        </el-table-column>
        <el-table-column label="商品图" width="90" align="center" fixed="left">
          <template slot-scope="scope">
            <img
              width="70px"
              height="70px"
              :src="scope.row.main_banner"
              alt=""
              @click="previewImage(scope.row.main_banner)"
            />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="title" width="300" fixed="left">
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="sale_mode" label="销售模式" align="center">
          <template slot-scope="scope">
            <span>{{
              $dictionary.extend("GOODS_SALE_TYPE", scope.row.sale_mode)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_date"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column label="状态" align="center" fixed="right">
          <template slot-scope="scope">
            <span>{{
              $dictionary.extend("GOODS_STATE", scope.row.state)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="190" fixed="right">
          <template slot-scope="scope">
            <div class="overall-flex overall-table-options">
              <el-link type="warning" @click="clickInfo(scope.row)"
                >查看</el-link
              >
              <el-link type="primary" @click="clickEdit(scope.row)"
                >编辑</el-link
              >
              <el-link
                type="danger"
                @click="clickRemove(scope.row, scope.$index)"
                >删除</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </pageMain>
  </div>
</template>

<script>
import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
import shoppingAPI from "@/api/shopping";
import PreviewMixin from '@/mixins/preview'
export default {
  mixins:[PreviewMixin],
  components: { pageMain, pageHeader },
  data() {
    return {
      goodsList: [],
    };
  },

  methods: {
    
    getGoodsList() {
      shoppingAPI
        .goodsList()
        .then((res) => {
          let data = res.data.list;
          this.goodsList = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击查看商品
    clickInfo(row) {
      console.log(row);

      this.$router.push({
        name: "shoppingManagementGoodsPreview",
        query: {
          goods: row.id,
        },
      });
    },
    // 点击删除商品
    clickRemove() {},
    // 点击编辑商品
    clickEdit(row) {
      this.$router.push({
        name: "shoppingManagementGoodsInfo",
        query: {
          goods: row.id,
        },
      });
    },
  },

  created() {
    this.getGoodsList();
  },
};
</script>

<style></style>
